<template>
	<view class="container">
		<text class="mark">{{mark}}分</text>
		<text class="tips">{{mark<90 ? "很遗憾，考试不合格" : "恭喜，本次考试合格"}}</text>
		<view class="navigation">
			<view>
				<text>{{leaveQuestion}}</text>
				<text>未作题</text>
			</view>
			<view>
				<text>{{detainQuestion}}</text>
				<text>错题</text>
			</view>
			<view @click="againExam">
				<image src="/static/kaoshi.png" mode="widthFix"></image>
				<text>重新考试</text>
			</view>
		</view>	
	</view>
	<view class="container">
		<text class="mock-title">近二十次模考成绩</text>
		<view class="history-score" v-for="(item,index) in immerse" :key="index">
			<text>{{item.score}}分</text>
			<text>{{item.time}}</text>
		</view>
	</view>
</template>

<script setup>
	import { reactive, ref } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import { select } from '/api/wechat.js'
	//分数
	const mark = ref(0)
	//未作题
	const leaveQuestion = ref(0)
	//对的题
	const essenceQuestion = ref(0)
	//错的题
	const detainQuestion = ref(0)
	//近20次考试结果
	const immerse = ref([])
	//页面加载
	onLoad(async(event)=>{
		const analyze = JSON.parse(event.data)
		mark.value = analyze.mark
		leaveQuestion.value = analyze.leaveQuestion
		essenceQuestion.value = analyze.essenceQuestion
		detainQuestion.value = analyze.detainQuestion
		//提交本次考试结果
		await select('/examination-result',{
			correctFrequency:essenceQuestion.value
		})

		//获取近二十次考试结果
		immerse.value = (await select('/gain-examination-result')).data
	})
	
	//再次考试
	const againExam = () => {
		uni.redirectTo({url:'/symmetry/shrub/exam'})
	}
	
</script>

<style>
page{
		background-color: #f7f7f7;
	}
	text{
		display: block;
	}
	.container{
		background-color: #ffffff;
		border-radius: 10rpx;
		margin: 20rpx;
		padding: 20rpx;
	}
	.mark{
		text-align: center;
		color: #ec6655;
		font-size: 50rpx;
		font-weight: bold;
	}
	.tips{
		text-align: center;
		padding: 30rpx 0;
		font-weight: bold;
		font-size: 40rpx;
	}
	.navigation{
		display: flex;
		align-items: center;
		justify-content: space-around;
	}
	.navigation view{
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.navigation image{
		display: block;
		width: 50rpx;
	}
	.navigation text{
		padding: 5rpx 0;
	}
	.mock-title{
		font-size: 35rpx;
		font-weight: bold;
	}
	.history-score{
		display: flex;
		justify-content: space-between;
		padding: 25rpx 0;
		border-bottom: 1rpx solid #f4f4f4;
	}
	.history-score text:nth-child(1){
		color: #ec6655;
		font-weight: bold;
	}
</style>